<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>account.xiaomi</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3423448_ew9ko25kdbr.css">
    <link rel="stylesheet" href="../css/retset.css">
    <link rel="stylesheet" href="../css/reg.css">
    <style>
    </style>
</head>

<body>
    <!-- 最外边的大盒子 -->
    <div class="main">
        <!-- 左侧盒子 -->
        <div class="left">&quot;&quot;</div>
        <!-- 右侧盒子 -->
        <div class="right">
            <!-- 头部 -->
            <div class="top">
                <!-- 左边logo -->
                <div class="title_left">
                    <span><i class="iconfont icon-icon-xiaomiguishu"></i>小米账号</span>
                </div>
                <!-- 右边功能 -->
                <ul class="title_right">
                    <li>用户协议</li>
                    <li>隐私政策</li>
                    <li>帮助中心</li>
                    <li>中文（简体）</li>
                </ul>
            </div>

            <div class="middle">
                <div class="middle_j">
                    <div class="title" style="box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);">
                        <h3><span style="width: 60px;">注册</span>&emsp;<span style="color:gray; width: 60px;">登录</span>
                        </h3>
                        <div class="contner">
                            <!-- 用户要求：名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于12 [0-9 a-z A-Z] -->
                            <p>
                                <label for="user">用&emsp;户&emsp;名</label>
                                <input type="text" class="username" name='user'>
                                <span class="user_span"></span>
                            </p>
                            <!-- 密码6-12位 不能包含特殊字符  -->
                            <p>
                                <label for="pwd">密&emsp;&emsp;&emsp;码</label>
                                <input type="password" class="password" name="pwd">
                                <span class="pwd_span"></span>
                            </p>
                            <!-- 确认密码两次相同 -->
                            <p>
                                <label for="respwd">确&nbsp;认&nbsp;密&nbsp;码</label>
                                <input type="password" class="respwd" name="respwd">
                                <span class="respwd_span"></span>
                            </p>
                            <!-- 电话必须是11位 -->
                            <p>
                                <label for="phone">电&emsp;&emsp;&emsp;话</label>
                                <input type="text" class="phone">
                                <span class="phone_span"></span>

                            </p>
                            <!-- 随机四位验证码（点击切换验证码） -->
                            <p>
                                <label for="code">验&emsp;证&emsp;码</label>
                                <input id="inp" type="text" placeholder="请输入验证码">
                                <input type="text" name="" id="a">
                                <button id="refresh">获取验证码</button>
                                <span class="inp_span"></span>

                            </p>
                            <!-- 滑动验证 -->
                            <div class="main_t">
                                <div class="empty"></div>
                                <div class="show"></div>
                                <div class="range">
                                    <div class="block"></div>
                                </div>
                            </div>
                            <!-- 用户协议 -->
                            <p style="color:gray;margin-bottom: 10px;margin-top: 10px;"><input type="checkbox"
                                    style="font-size: 25px;">已阅读并同意小米账号<a href="">用户协议</a>和<a href="">隐私政策</a></p>

                            <!-- 注册按钮 -->
                            <button class="btn" disabled style="font-size: 20px; color:aliceblue">注册</button>
                            <!-- 收不到验证码？ -->
                            <p><a href="" style="color: #ff5c00;
                                text-decoration: none;
                                background-color: rgba(0,0,0,0);
                                outline: none;
                                cursor: pointer;
                                transition: color .3s;
                                -webkit-text-decoration-skip: objects;
                                margin-top: 20px;">收不到验证码？</a></p>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script src="../js/jq.js"></script>
    <script src="../js/reg.js"></script>
    <script src="../js/tools.js"></script>
    <script>
        // 随机生成验证码其中包括26个小写英文字母、大写字母、以及数字0到9
        // 0-9的数字
        let numArr = [];
        for (let i = 0; i < 10; i++) {
            numArr.push(i + '')
        }

        console.log(numArr)
        console.log(numArr[1])



        // 小写的26个英文字母
        let smallArr = [];
        for (let i = 97; i <= 122; i++) {
            let str = String.fromCharCode(i);
            smallArr.push(str)
        }

        // 大写的26个英文字母
        let bigArr = [];
        for (let i = 65; i <= 90; i++) {
            let str = String.fromCharCode(i);
            bigArr.push(str)
        }

        // 将他们全部放在一个新的数组中得到一个验证码数组
        let arr = smallArr.concat(numArr, bigArr)
        //验证码判断
        let oInp = get('inp');
        let oCode = get('a');
        // 打开就显示4位验证码
        oCode.value = code(4)

        // 账号验证
        let count = 0;
        $('.username').oninput = function () {
            const username = $('.username').value;
            console.log(username);
            if (username === '') {
                $('.user_span').innerHTML = '账号不能为空';
                $('.user_span').style.color = 'orange';
                return
            }
            if (username.length > 12 || username.length < 6) {
                $('.user_span').innerHTML = '用户名必须是6-12位置';
                $('.user_span').style.color = 'orange';
                return
            }
            if (username.charAt(0) >= 0 && username.charAt(0) <= 9) {
                $('.user_span').innerHTML = '用户名不能使用数字开头';
                $('.user_span').style.color = 'orange';
                return
            }
            for (let i in username) {
                if (arr.indexOf(username[i]) === -1) {
                    $('.user_span').innerHTML = '用户名只能是数字和字母组成';
                    $('.user_span').style.color = 'orange';
                    return
                }
            }

            $('.user_span').innerHTML = '√';
            $('.user_span').style.color = 'green';


            count++;

        }
        // 密码验证
        $('.password').oninput = function () {
            const password = $('.password').value;
            console.log(password);
            if (password === '') {
                $('.pwd_span').innerHTML = '不能为空';
                $('.pwd_span').style.color = 'orange';
                return
            }
            if (password.length > 12 || password.length < 6) {
                $('.pwd_span').innerHTML = '密码必须是6-12位';
                $('.pwd_span').style.color = 'orange';
                return
            }
            for (let i in password) {
                if (arr.indexOf(password[i]) === -1) {
                    $('.pwd_span').innerHTML = '用户名只能是数字和字母组成的';
                    $('.pwd_span').style.color = 'orange';
                    return
                }
            }
            $('.pwd_span').innerHTML = '√';
            $('.pwd_span').style.color = 'green';



            count++;

        }

        // 确认密码
        $('.respwd').oninput = function () {
            const password = $('.password').value;
            const respwd = $('.respwd').value;
            console.log(respwd);
            if (respwd === '') {
                $('.respwd_span').innerHTML = '不能为空';
                $('.respwd_span').style.color = 'orange';
                return
            }
            if (respwd.length > 12 || respwd.length < 6) {
                $('.respwd_span').innerHTML = '密码必须是6-12位';
                $('.respwd_span').style.color = 'orange';
                return
            }
            if (password === respwd) {
                $('.respwd_span').innerHTML = '密码正确'
                $('.respwd_span').style.color = 'green'
            }
            count++;

        }
        $('.phone').oninput = function () {
            const phone = $('.phone').value;
            console.log(phone);
            if (phone === '') {
                $('.phone_span').innerHTML = '不能为空';
                $('.phone_span').style.color = 'orange';
                return
            }
            if (phone.length !== 11) {
                $('.phone_span').innerHTML = '电话必须是11位';
                $('.phone_span').style.color = 'orange';
                return
            }

            // if(phone === includes.numArr&& numArr[1] === 1){
            //     // console.log(numArr[0]);
            //     $('.phone_span').innerHTML = '电话必须是数字并且是1开头';
            //     $('.phone_span').style.color = 'orange';
            //     return
            // }
            // // for (let i in phone) {
            // //     if (numArr.indexOf(phone[1]) === 1) {
            // //         $('.phone_span').innerHTML = '电话必须是数字组成';
            // //         $('.phone_span').style.color = 'orange';
            // //         return
            // //     }
            // // }

            $('.phone_span').innerHTML = '√'
            $('.phone_span').style.color = 'green'


            count++
            if (count >= 4) {
                $('.btn').disabled = false;
            }

        }
        // 判断验证码
        // $('#inp').oninput = function(){
        //     let oInp = get('#inp');
        //     console.log(oInp);
        //     let oCode = get('a');
        //     // console.log(oCode);
        //     if (oInp.value === '') {
        //         $('.inp_span').innerHTML = '验证码为空';
        //         $('.inp_span').style.color = 'orange';
        //         // return
        //     }
        //     if (oInp.value !== oCode.value) {
        //         $('.inp_span').innerHTML = '验证码错误';
        //         $('.inp_span').style.color = 'orange';
        //         oInp.value = '';
        //         oCode.value = code(4);

        //     }
        // }


        // $('.inp_span').innerHTML = '√';
        // $('.inp_span').style.color = 'green';

        // count++











        // 刷新验证码
        let refresh = get('refresh');
        let flag = true;
        refresh.onclick = function () {
            oCode.value = code(4)
            if (flag) {
                //    flag = false ;
                let count = 10;  // 计时
                // 把按钮的值变成10s
                refresh.innerHTML = count + 's';
                // 倒计时
                let t = setInterval(function () {
                    count--;
                    refresh.innerHTML = count + 's';
                    refresh.disabled = true;
                    if (count === 0) {
                        clearInterval(t);
                        refresh.innerHTML = '获取验证码';
                        flag = true;
                        refresh.disabled = false;
                    }
                }, 500)
                // 前面的定时器是异步的 --- flag=false 会先执行
                flag = false;
            }

        }





        // 滑动验证
        // 获取数据
        let oMain = document.querySelector('.main_t')
        let oShow = document.querySelector('.show')
        let oEmpty = document.querySelector('.empty')
        let oBlock = document.querySelector('.block')
        let orange = document.querySelector('.range')

        // 最大距离
        let maxX = oMain.clientWidth - oBlock.offsetWidth / 2;
        let maxY = oMain.clientHeight - oEmpty.offsetHeight / 2;

        console.log(maxX, maxY)
        // 为了让挖空更贴近右边，不一定非要/2
        let minX = oMain.clientWidth / 2;
        console.log(minX)

        randPosition();

        oBlock.onmousedown = function (e) {
            let gapX = e.x;

            document.onmousemove = function (e) {
                let x = e.x - gapX;
                if (x < 0) x = 0;
                if (x > maxX) x = maxX;
                oBlock.style.left = x + 'px';
                oShow.style.left = x + 'px';
            }
        }

        document.onmouseup = function () {
            document.onmousemove = null;
            console.log(oBlock.style.left);
            if (parseInt(oBlock.style.left) != 0) {
                // 判断是否重合
                if (Math.abs(parseInt(oShow.style.left) - parseInt(oEmpty.style.left)) <= 5) {
                    // $('.btn').disabled = false;
                }
                else {
                    randPosition();
                    return

                }
            }

        }

        function randPosition() {
            var x = rand(minX, maxX);
            var y = rand(0, maxY);

            oEmpty.style.cssText = `left:${x}px;top:${y}px;`;
            oShow.style.cssText = `top:${y}px;background-position:-${x}px -${y}px;`;
            oBlock.style.left = 0;
        }

        function rand(min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }





        // 注册事件
        $('.btn').onclick = function () {
            // alert('恭喜你')
            const username = $('.username').value;
            const password = $('.password').value;
            const phone = $('.phone').value
            ajax({
                type: 'post',
                path: '../php/reg.php',
                data: {
                    username,
                    password,
                    phone
                },
                success: res => {
                    console.log(res);
                    const { status, msg } = res;
                    if (status) {
                        location.href = './log.html'
                    } else {
                        alert('注册成功');
                        setCookie('YYDS_' + username, password);

                    }
                }
            })
        }







































    </script>


</body>

</html>